<template>
  <div class="bg">
    <div class="head">
      <img src="../../assets/image/gerenyuyue/1.png" alt style="width:100% ;height:260px;" />
    </div>
    <div class="parent">
      <div class="child">
        <div>
          <ul class="choose">
            <li
              v-for="(item, index) of nav"
              :key="index"
              :class="{ active: index == i }"
            >{{ item.title }}</li>
          </ul>
        </div>
        <div v-show="show">
          <div class="date">选择日期</div>
          <ul class="xinqi">
            <li v-for="(item, index) of riqi" :key="index">
              <p class="num">{{ item.week.slice(2, 3) }}</p>
              <p class="en">{{ item.week | getWeek }}</p>
            </li>
          </ul>

          <div>
            <ul class="riqi">
              <li
                v-for="(item, index) of riqi"
                :key="index"
                :style="{ background: typeof(item.datePoll) === 'string'? '#fff' : '#ebebeb',border:typeof(item.datePoll) === 'string'?'1px solid #666':''}"
                :class="{ white_active: index == yansei }"
                @click="pickDate(item, index)"
              >
                <p class="num2">{{ item.date }}</p>
                <p class="en">{{ item.datePoll }}</p>
              </li>
            </ul>
          </div>
          <div class="date">选择时间段</div>
          <div class="time">09:00-16:00</div>
          <div class="btn">
            <span id="next" @click="toTwo()">下一步</span>
          </div>
        </div>
        <!-- 2 -->
        <div v-show="show2">
          <div></div>
          <ul class="form">
            <li>
              <p>团队名称</p>
              <p>负责人身份证</p>

              <p>负责人手机号</p>
              <p>人数</p>
            </li>
            <li>
              <p>
                <input v-model="team_name" type="text" />
              </p>
              <p>{{idttNo}}</p>
              <p>{{ realMobile }}</p>
              <p>
                <input v-model="sum" type="text" />
              </p>
            </li>
          </ul>
          <div class="btn">
            <p @click="toOne">上一步</p>
            <span id="next" @click="toThree">下一步</span>
          </div>
        </div>
        <!-- 3 -->
        <div v-show="show3">
          <div class="table_head">
            <span>序号</span>
            <span>负责人姓名</span>
            <span>参观人数</span>
            <span>负责人身份证</span>
            <span>负责人手机号</span>
          </div>
          <ul class="table_body">
            <li>
              <span>
                <p>01</p>
              </span>
              <span>
                <p>{{ name }}</p>
              </span>
              <span>
                <p>{{this.sum}}</p>
              </span>
              <span>
                <p>{{ idttNo }}</p>
              </span>
              <span>
                <p>{{ realMobile }}</p>
              </span>
            </li>
          </ul>
          <div class="btn">
            <p @click="back">返回</p>
            <p @click="toFour">提交</p>
          </div>
        </div>
        <!-- 4 -->
        <div v-show="show4">
          <div class="pic">
            <div>
              <img src="../../assets/image/gerenyuyue/gou.png" alt />
            </div>

            <span>预约成功</span>
          </div>
          <div class="content">
            <p class="tip">温馨提示</p>
            <p class="content1">1.&nbsp; 现场有序排队,请提前安排好时间,以免迟到</p>
            <p class="content1">2.&nbsp;疫情期间参加的观众,请提前申领绿码,参观过程中请全程佩戴好口罩,并保持安全距离(>1.5米)</p>
            <p class="content1">3.&nbsp;若您无法到馆,请提前在个人中心个人预约中取消您的预约票</p>
          </div>
        </div>
      </div>
    </div>
    <div id="padding" style="clear:both"></div>
    <foot2 class="dibu"></foot2>
  </div>
</template>

<script>
import { JudgeLogin } from "../../api/login";
import { mapState, mapActions } from "vuex";
import foot2 from "../../components/foot2";
export default {
  name: "App",

  data() {
    return {
      i: 0,
      show: true,
      show2: false,
      show3: false,
      show4: false,
      xinqi: [
        { num: "一", en: "MON" },
        { num: "二", en: "TUE" },
        { num: "三", en: "WEB" },
        { num: "四", en: "THU" },
        { num: "五", en: "FRI" },
        { num: "六", en: "SAT" },
        { num: "日", en: "SUN" },
      ],
      yansei: -1,

      riqi: [],
      time: [],
      chooseDate: "", //选择的时间
      name: "",
      idttNo: "",
      realMobile: "",
      team_name: "", //团队名称
      sum: "", //总数
      nav: [
        { title: "第一步:选择时间" },
        { title: "第二步:信息填写" },
        { title: "第三步:确认信息" },
        { title: "第四步:预约成功" },
      ],
    };
  },
  mounted() {
    this.get_riqi();
  },
  components: {
    foot2: foot2,
  },
  methods: {
    ...mapActions(["isShow", "isHide"]),
    pickDate(item, index) {
      if (item.status != 2) {
        this.yansei = index;
      }
      this.chooseDate = item.id;
    },
    //去第一个页面
    toOne() {
      this.show = true;
      this.show2 = false;
      this.show3 = false;
    },
    // 去第三个页面
    toThree() {
      JudgeLogin(this).then((res) => {
        if (res.code != "UnLogin" && res.email != "") {
          this.name = res.info.name;
          this.idttNo = res.info.idttNo;

          this.realMobile = res.info.realMobile;
          if (!this.team_name || !this.sum) {
            this.$message({
              message: "内容不能为空",
              type: "error",
              duration: 1000,
              offset: 320,
            });
            return;
          }
          document.body.scrollTop = document.documentElement.scrollTop = 0;
          this.show3 = true;
          this.show2 = false;
          this.i = 2;
        }
      });
    },
    back() {
      this.show3 = false;
      this.show2 = true;
      this.i = 1;
    },
    // 去第2个页面
    toTwo() {
      JudgeLogin(this).then((res) => {
        if (res.code != "UnLogin" && res.email != "") {
          if (!this.chooseDate) {
            this.$message({
              message: "请选择预约日期",
              type: "error",
              duration: 1000,
              offset: 320,
            });
            return;
          }
          document.body.scrollTop = document.documentElement.scrollTop = 0;
          this.idttNo = res.info.idttNo;
          this.realMobile = res.info.realMobile;
          this.show = false;
          this.show3 = false;
          this.show2 = true;
          this.i = 1;
        }
      });
    },
    //去第四个页面
    toFour() {
      JudgeLogin(this).then((res) => {
        if (res.code != "UnLogin" && res.email != "") {
          this.$api
            .get(
              `${this.zs}/tuandui/yuyue/apply?id=${this.chooseDate}&teamName=${this.team_name}&count=${this.sum}`
            )
            .then((res) => {
              if (res.data.success == true) {
                document.body.scrollTop = document.documentElement.scrollTop = 0;
                this.i = 3;
                this.show4 = true;
                this.show3 = false;
              } else {
                this.$message({
                  message: res.data.msgDetail,
                  type: "warning",
                  duration: 1000,
                  offset: 320,
                });
              }
            });
        }
      });
    },

    //渲染日期
    get_riqi() {
      this.$api.get(`${this.zs}/geren/time/list`).then((res) => {
        // console.log(res);
        this.riqi = res.data.data;

        this.riqi.forEach((item) => {
          // var time = item.date.split("-");
          item.date =
            item.date.split("-")[1] + "月" + item.date.split("-")[2] + "日";
          if (item.status == 2) {
            this.$set(item, "datePoll", "闭馆");
          }
        });
      });
    },
  },
  filters: {
    getWeek(val) {
      switch (val) {
        case "星期一":
          return "MON";
        case "星期二":
          return "TUE";
        case "星期三":
          return "WEN";
        case "星期四":
          return "THU";
        case "星期五":
          return "FRI";
        case "星期六":
          return "SAT";
        case "星期日":
          return "SUN";
      }
    },
  },
};
</script>
<style scoped>
a {
  text-decoration: none;
  color: #999999;
}

p,
ul,
li {
  margin: 0px;
  padding: 0px;
  cursor: pointer;
}
.bg {
  position: relative;
}
.gray {
  background: #ebebeb;
}
.parent {
  background: white;
  border-radius: 5px;
  width: 1600px;
  position: absolute;

  top: 222px;
  left: 50%;
  margin-left: -800px;
}
.child {
  max-width: 1100px;
  margin: auto;
}
#padding {
  max-width: 1100px;
  height: 900px;
}
ul.choose {
  margin-top: 120px;
  margin-bottom: 75px;
  display: flex;

  width: 1115px;
}
ul.choose li {
  border-bottom: 5px solid #ebebeb;
  box-sizing: border-box;
  padding-bottom: 14px;
  font-size: 24px;
  padding: 0 50px 10px;
}
ul.choose .active {
  border-bottom: 3px solid #0064de;
}
.white_active {
  color: white !important;
  background: #7d7d7d !important ;
}

.btn {
  margin-top: 60px;
  display: flex;

  justify-content: space-evenly;
}
.btn p {
  width: 200px;
  height: 40px;
  color: white;
  text-align: center;
  line-height: 40px;
  border-radius: 3px;
  cursor: pointer;
}
.next {
  width: 200px;
  height: 40px;
  color: white;
  text-align: center;
  line-height: 40px;
  border-radius: 3px;
  cursor: pointer;
  background: #3c3cff;
}
.btn > :first-child {
  background: gray;
}
.btn > :nth-child(2) {
  background: #3c3cff;
}
#next {
  width: 200px;
  height: 40px;
  color: white;
  text-align: center;
  line-height: 40px;
  border-radius: 3px;
  cursor: pointer;
  background: #3c3cff;
}
.pic {
  text-align: center;
  display: flex;
  flex-direction: column;
  font-size: 30px;
  color: #55b49f;
  margin-bottom: 50px;
}
.content {
  background: #ebebeb;
  box-sizing: border-box;
  padding: 30px 50px;
  line-height: 2;
}
.tip {
  color: #666666;
}
.content1 {
  color: #aa5653;
  font-size: 18px;
}
.date {
  border-left: 5px solid blue;
  color: #333333;
  padding: 10px;
  margin-bottom: 30px;
  font-size: 30px;
  color: #333333;
}

.xinqi,
.riqi {
  display: flex;
  justify-content: space-between;
  margin-bottom: 34px;
}
.xinqi li,
.riqi li {
  width: 128px;
  height: 93px;
  background: #5a6cf0;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.riqi li:first-child {
  background: white;
  border: 1px solid #666666;
}
.xinqi {
  margin-bottom: 34px;
}
.riqi {
  margin-bottom: 80px;
}
.riqi li {
  background: #ebebeb;
  color: #666666;
}
.num {
  font-size: 30px;
}
.num2 {
  font-size: 24px;
}
.en {
  font-size: 24px;
}
.time {
  background: #ebebeb;
  width: 1100px;
  font-size: 24px;
  font-weight: lighter;
  text-align: center;
  height: 70px;
  line-height: 70px;
}
.table_head {
  background: #586ff9;
  height: 40px;
  color: white;
}
.table_head span {
  display: inline-block;
  width: 210px;
  line-height: 40px;
  font-size: 18px;
  text-align: center;
}
.table_body li {
  display: flex;
}
.table_body {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  border: 2px solid #ebebeb;
  border-top: none;
}
.table_body span {
  width: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 66px;

  text-align: center;
}
.table_body span p {
  width: 150px;
  height: 44px;
  line-height: 44px;
  border: 1px solid #9a9a9a;
}
.form {
  width: 600px;
  border: 1px solid black;
  display: flex;
  margin: auto;
}

.form li:first-child p {
  /* background: #586ff9; */
  /* color: white; */
  width: 300px;
  border-right: 1px solid black;
}
.form li p {
  padding-left: 20px;
  box-sizing: border-box;
  width: 300px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid black;
}
li {
  list-style: none;
}
</style>
